<template>
  <div>
    <el-card>
      <p>互动交流资料导出</p>
      <div class="searchArea">
        <el-button type='primary' @click="Derived">导出</el-button>
      </div>
      <!--<div class="tableBox">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="data" label="相关资料"></el-table-column>
          <el-table-column label="操作"  width='100' align='center'>
            <template slot-scope="scope">
              <el-button type='primary' @click="download(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>-->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>下载数据</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="downloadLoca(1)">确 定</el-button>
        </span>
      </el-dialog>


      <el-dialog
        title="提示"
        :visible.sync="lhdialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>下载料号</span>
        <el-form :model="formLH">
          <el-form-item label="物料编号" :label-width="formLabelWidth">
            <el-input v-model="formLH.productId" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="lhdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="downloadCheck()">筛选</el-button>
          <el-button type="primary" @click="downloadLoca(2)">开始下载</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="提示"
        :visible.sync="orderdialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>下载订单信息</span>
        <el-form :model="formOrder">
          <el-form-item label="收货方电话(选填)" :label-width="formLabelWidth">
            <el-input v-model="formOrder.mobile" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="timeRange">
            <el-date-picker
              v-model="formOrder.timeRange"
              clearable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="orderdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="downlaodOrder()">筛 选</el-button>
          <el-button type="primary" @click="downloadLoca(3)">开始下载</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="下载聊天信息"
        :visible.sync="chatdialogVisible"
        width="50%"
        :before-close="handleClose">
        <el-form :model="formChat" :label-width="formLabelWidth">
          <el-form-item label="双方用户(用户与客服)" >
            <el-input v-model="formChat.fromId" autocomplete="off" style="width:30%"></el-input>
            <el-input v-model="formChat.toId" autocomplete="off" style="width:30%;margin-left:15px"></el-input>
          </el-form-item>
          <el-form-item prop="chatTimeRange" label='起始时间'>
            <el-date-picker
              v-model="formChat.chatTimeRange"
              clearable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="chatdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="downlaodChat()">筛 选</el-button>
          <el-button type="primary" @click="downloadLoca(4)">开始下载</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import {
  ORDER_DOWNLOAD,
  PRODUCT_DOWNLOAD,
  LIAOHAO_DOWNLOAD,
  CHAT_DOWNLOAD
} from '@/utils/api';
import axios from 'axios'
export default {
  data() {
    return {
      dialogVisible: false,
      lhdialogVisible: false,
      orderdialogVisible: false,
      chatdialogVisible: false,
      productUrl:'',
      liaohaoUrl:'',
      orderUrl:'',
      chatUrl:'',
      downloadUrl:'http://oss.dataos.top/',
      tableData: [
        { id: 1, data: "物料信息" },
        { id: 2, data: "料号信息" },
        { id: 3, data: "订单信息" },
        { id: 4, data: "聊天记录" },
      ],
      productId:'',
      formLH:{
        productId:''
      },
      formOrder:{
        mobile:'',
        timeRange:[]
      },
      formChat:{
        fromId:0,
        toId:0,
        chatTimeRange:[]
      },
      formLabelWidth: '150px'
    };
  },
  methods: {
  	Derived(){//导出
  		console.log('Derived')
  	},
  	
  	
  	
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    download(row) {
      switch(row.id){
        case 1:
          this.downlaodPro()
          break
        case 2:
          this.lhdialogVisible=true
          break
        case 3:
          this.orderdialogVisible=true
          break
        case 4:
          this.chatdialogVisible=true
          break
      }
    },
    downlaodPro(){
      console.log("==PRODUCT_DOWNLOAD 111=>")
      PRODUCT_DOWNLOAD({ 
      }).then(res => {
        this.$message.success('生成物料资料成功')
        this.productUrl=this.downloadUrl+res.data
        this.productUrl=this.productUrl.replace('tmp','')
        console.log("==PRODUCT_DOWNLOAD=>"+this.productUrl)
        this.dialogVisible = true
      })
    },    
    downloadLoca(type){
      switch(type){
        case 1:
          console.log("==downloadLoca=>"+this.productUrl)
          if(""==this.productUrl||this.productUrl==null||this.productUrl=='undefined'){
            this.$message.error('先筛选资料')
            return
          }
          location.href = this.productUrl
          break
        case 2:
          console.log("==liaohaoUrl=>"+this.liaohaoUrl)
          if(""==this.liaohaoUrl||this.liaohaoUrl==null||this.liaohaoUrl=='undefined'){
            this.$message.error('先筛选资料')
            return
          }
          location.href = this.liaohaoUrl
          break
        case 3:
          console.log("==orderUrl=>"+this.orderUrl)
          if(""==this.orderUrl||this.orderUrl==null||this.orderUrl=='undefined'){
            this.$message.error('先筛选资料')
            return
          }
          location.href = this.orderUrl
          break
        case 4:
          console.log("==chatUrl=>"+this.chatUrl)
          if(""==this.chatUrl||this.chatUrl==null||this.chatUrl=='undefined'){
            this.$message.error('先筛选资料')
            return
          }
          location.href = this.chatUrl
          break
      }
    },
    downloadCheck(){
      LIAOHAO_DOWNLOAD({ 
        productId:this.formLH.productId
      }).then(res => {
        this.$message.success('生成料号资料成功')  
        this.liaohaoUrl=this.downloadUrl+res.data
        this.liaohaoUrl=this.liaohaoUrl.replace('tmp','')
        console.log("==LIAOHAO_DOWNLOAD=>"+this.liaohaoUrl)
        this.lhdialogVisible = true
      })
    },
    downlaodOrder(){
      ORDER_DOWNLOAD({ 
        mobile:this.formOrder.mobile,
        startTime:new Date(this.formOrder.timeRange[0]).getTime()/1000,
        endTime:new Date(this.formOrder.timeRange[1]).getTime()/1000
      }).then(res => {
        this.$message.success('生成订单资料成功')  
        this.orderUrl=this.downloadUrl+res.data
        this.orderUrl=this.orderUrl.replace('tmp','')
        console.log("==downlaodOrder=>"+this.orderUrl)
        this.orderdialogVisible = true
      })
    },
    downlaodChat(){
      CHAT_DOWNLOAD({ 
        fromId:this.formChat.fromId,
        toId:this.formChat.toId,
        startTime:new Date(this.formChat.chatTimeRange[0]).getTime()/1000,
        endTime:new Date(this.formChat.chatTimeRange[1]).getTime()/1000
      }).then(res => {
        this.$message.success('生成聊天资料成功')  
        this.chatUrl=this.downloadUrl+res.data
        this.chatUrl=this.chatUrl.replace('tmp','')
        console.log("==chatUrl=>"+this.chatUrl)
        this.chatdialogVisible = true
      })
    },
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>